<template>
    <view class="uni-shadow u-p-t-20" @tap.stop="select">
        <view class="u-flex team">
            <u-icon v-if="team.status==3&&team.checked" name="checkmark-circle" color="#21A5F3" class="u-m-r-30"></u-icon>
            <u-icon v-if="team.status==3&&!team.checked" name="checkmark-circle" class="u-m-r-30"></u-icon>
            <view>
                <u-row class="u-flex u-flex-wrap">
                    <u-col v-for="(item,index) in team.list" :key="index"
                        :span="(index+1)%2==0?6:6" class="u-m-t-20 u-font-26 col">
                        <text class="u-m-r-20 uni-dec-color">{{item.title}}</text>
                        <text class="u-line-1" style="max-width:60%" @longtap="longTap(item.value)">{{item.value}}</text>
                    </u-col>
                </u-row>
            </view>
        </view>
        <view v-if="team.status==2" class="u-m-t-40 u-flex u-row-right">
            <u-button shape="circle" size="mini" type="primary" :plain="true" class="btn" text="提交"></u-button>
            <u-button shape="circle" size="mini" class="u-m-l-40 btn" text="删除"></u-button>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name: '',
    props: {
        tem: {
            default(){
                return{}
            }
        }
    },

    data(){
        return{
            team: {
                type: 1,
                checked: false,
                list:[
                    { field: '', title:'业务状态' , value:'未提交' },
                    { field: '', title:'班组名称' , value:'测试' },
                    { field: '', title:'所属企业' , value:'假设企业的名称很长' },
                    { field: '', title:'办理时间' , value:'2021.12.10' },
                ]
            }
        }
    },

    created() {
        this.team.status = this.tem.status
        this.team.checked = this.tem.checked
        this.team.list = this.tem.list
    },

    methods: {
        // 选择事件
        select(){
            this.$emit('select')
        },

        // 长按事件
        longTap(value){
            this.$refs.uToast.show({
                message: value,
                type: 'default',
                duration: 3000
            })
        },
    },
}
</script>

<style scoped lang="scss">
    .col{
        flex-direction: row;
    }
    .btn{
        width: 108rpx;
        height: 50rpx;
        margin: 0;
        /deep/.u-button__text{
            font-size: 24rpx !important;
        }
    }
</style>